<template>
    <div class="main">
        <!-- {{userInfo}} -->
        <div class="topImg">
            <img src="@/assets/img/share/top.png" alt="">
            <div class="inviteTxt">
                <p>
                    {{invateName}}
                </p>
                <p>
                    诚邀您成为 
                    <span>
                        {{agentTypeName}}
                    </span>
                </p>
            </div>
            <div class="container">
                <div class="form">
                    <div class="form-item">
                        <p class="label">
                            手机号
                        </p>
                        <p class="form-item-con" style="position: relative">
                            <input v-model.trim="phone" class="inputs" type="text" maxlength="11">
                           
                        </p>
                    </div>
                   
                    <div class="form-item">
                        <p class="label">
                            机构名称
                        </p>
                        <p class="form-item-con">
                            <input v-model.trim="agentName" class="inputs" type="text" maxlength="30">
                        </p>
                    </div>
                    <div class="form-item">
                        <p class="label">
                            结算方式
                        </p>
                        <div class="form-item-con">
                            <div class="inputs pay-type" @click="showAction = true">
                                {{curAction.name}}
                            </div>
                        </div>
                    </div>
                    <div class="form-item">
                        <p class="label">
                            结算账号
                        </p>
                        <p class="form-item-con">
                            <input v-model.trim="account" class="inputs" type="text" maxlength="30">
                        </p>
                    </div>
                    <div class="form-item">
                        <p class="label">
                            所有人
                        </p>
                        <p class="form-item-con">
                            <input v-model.trim="accountHolder" class="inputs" type="text" maxlength="10">
                        </p>
                    </div>
                    <div class="form-item">
                        <p class="label">
                            付款证明
                        </p>
                        <p>
                            <uploadImg ref="payCertificateFile"></uploadImg>
                        </p>
                    </div>
                    <div class="form-item">
                        <p class="label">
                            营业执照
                        </p>
                        <p>
                            <uploadImg ref="businessLicenseFile"></uploadImg>
                        </p>
                    </div>
                    <div class="form-item">
                        <p class="label">
                            合同
                        </p>
                        <p>
                            <uploadImg ref="contractFile"></uploadImg>
                        </p>
                    </div>
                    <div class="form-item">
                        <p class="label">
                            相关文档
                        </p>
                        <p>
                            <uploadImg ref="othersFile"></uploadImg>
                        </p>
                    </div>
                    <!-- <div class="form-item">
                        <p class="label">
                            说明
                        </p>
                        <p>
                            <textarea v-model.trim="a" rows="3" cols="30">
                            
                            </textarea>
                        </p>
                    </div> -->
                    <div class="footer">
                        <span @click="getCode">
                            确认提交
                        </span>
                        <span @click="cancel">
                            取消
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <van-action-sheet v-model="showAction" :actions="actions" @select="onSelect" />

        <smsCode ref="smsCode" :phone='phone' @comfirm='submit'></smsCode>
        <guide></guide>
    </div>
</template>
<script>
import bottomNav from '@/components/bottomNav/bottomNav.vue'
import uploadImg from '@/components/uploadImg.vue'
import smsCode from './smsCode'
import guide from './guide'
import wechat from '@/util/wechat'
import {Base64} from 'js-base64'
import {apply} from '@/api/shareApi'

export default {
    name: 'todayData',
    components: {
        bottomNav, uploadImg, guide, smsCode
    },
    computed: {
        userInfo () {
            return this.$store.state.login.userInfo
        },
       
        agentTypeName () {
            
            if (this.agentType == 0) {
                return '代理商'
            } else {
                return '合伙人'
            }
        },
        isShare () {
            return this.$store.state.share.isShare
        }
    },
    data () {
        return {
            a: '',

            agentId: '', // 代理商ID
            agentType: '', // 代理商类型
            invateName: '', //

            account: '', // 账号
            accountHolder: '', // 账号所有人
            agentName: '', // 机构名称
            businessLicenseFile: [], // 营业执照
            contractFile: [], // 合同
            othersFile: [], // 相关文档
            payCertificateFile: [], // 付款证明
            // ownerId: '', 
            phone: '',
            code: '',
            settleType: '', // 结算方式
            teamId: '', //团队主键
            teamName: '', // 团队名称

            actions: [
                { value: 1, name: '微信' },
                { value: 2, name: '支付宝' },
                { value: 3, name: '银行卡' }
            ],
            curAction: '',
            showAction: false,
           
        }
    },
    methods: {
       
        onSelect (item) {
            this.showAction = false
            this.curAction = item
        },
        getParams() {
            var search = location.search
            search = search.replace('?', '')
            var arr = search.split('&')
            var obj = {}
            for (var item of arr) {
                var list = item.split('=')
                obj[list[0]] = list[1]
            }
        
            return obj
        },
        async init () {
            try {
                 await wechat.start()
            } catch (error) {
                
            }
            
            let data = this.getData()
            console.log(data)
            // alert('测试数据：' + JSON.stringify(data))
            if (!data) {
                // 发出分享
               
                this.agentId = this.userInfo.agentId
                this.agentType = this.$store.state.share.agentType
                this.invateName = this.userInfo.agentName
                this.teamId = this.$store.state.share.teamId
                this.teamName = this.$store.state.share.teamName
                
            } else {
                // 收到分享
               
                this.agentId = data.agentId
                this.agentType = data.agentType
                this.invateName = data.invateName
                this.teamId = data.teamId
                this.teamName = data.teamName
            }
            wechat.shareAgency({
                desc: this.invateName + ' 邀请您加入' + this.agentTypeName, 
                title: '邀请您加入' + this.agentTypeName, 
                data: {
                    agentId: this.agentId, 
                    agentType: this.agentType,
                    agentTypeName: this.agentTypeName,
                    invateName: this.invateName,
                    teamId: this.teamId,
                    teamName: this.teamName
                }
                
            })
        }, 
        getData () {
            // let param = this.getParams()
            // let data = param.data

            let data = localStorage.agencyShareData
            localStorage.removeItem("agencyShareData");

            if (data) {
                data = Base64.decode(data)
              
                data = JSON.parse(data)
            }
            return data

        },
        getCode () {
            if (!/^1[3456789]\d{9}$/.test(this.phone)) {
                this.$toast.fail('请输入正确的手机号码')
                return 
            }
            if (!this.agentName) {
                 this.$toast.fail('请输入机构名称')
                return
            }
            
            if (!this.curAction) {
                this.$toast.fail('请选择结算方式')
                return
            }
            
            if (!this.account) {
                 this.$toast.fail('请输入结算账号')
                return
            }
            if (!this.accountHolder) {
                this.$toast.fail('请输入结算账号所有人')
                return
            }
            this.$refs.smsCode.show()
        },
       
        async submit (code) {
            console.log(code)
            this.payCertificateFile = await this.$refs.payCertificateFile.upload()
            this.payCertificateFile = this.createFileList(this.payCertificateFile)

            this.contractFile = await this.$refs.contractFile.upload()
            this.contractFile = this.createFileList(this.contractFile)

            this.othersFile = await this.$refs.othersFile.upload()
            this.othersFile = this.createFileList(this.othersFile)

            this.businessLicenseFile = await this.$refs.businessLicenseFile.upload()
            this.businessLicenseFile = this.createFileList(this.businessLicenseFile)

            let param = {
                'code': code,
                "account": this.account,
                "accountHolder": this.accountHolder,
                "agentName": this.agentName,
                "agentType": this.agentType,
                "businessLicenseFile": this.businessLicenseFile,
                "contractFile": this.contractFile,
                 "othersFile": this.othersFile,
                 "payCertificateFile": this.payCertificateFile,
              
               
                "ownerId": this.agentId,
               
                "phone": this.phone,
                "settleType": this.curAction.value,
               
            }
            if (this.teamId) {
                param.teamId = this.teamId
            }
            if (this.teamName) {
                param.teamName = this.teamName
            }
           
          
            try {
                 let res = await apply(param)
                
                this.$dialog.alert({
                    message: res.msg,
                })
                if (res.status == 200) {
                     this.clear()
                }
            } catch (error) {
                 this.$dialog.alert({
                    message: error.response.data.error.msg
                })
            }
           
           
           
        },
        clear () {
            this.phone = ''
            this.agentName = '' 
            this.curAction = ''
            this.account = '' 
            this.accountHolder = ''
            this.$refs.payCertificateFile.clear()
            this.$refs.contractFile.clear()
            this.$refs.othersFile.clear()
            this.$refs.businessLicenseFile.clear()
        },
        cancel () {

        },
        createFileList (list) {
            return list.map(url => {
                var suffix = url.substring(url.lastIndexOf('.'))
                return {
                    fileExt: suffix,
                    fileName: 'aaa' + suffix,
                    fileUrl: url
                }
            })
        }
    },
    async mounted () {
         this.init()

        window.οnbefοreunlοad=function(e){
           alert('οnbefοreunlοad')
            return 1
        }
    },
    destroyed () {
        wechat.share()
    }
}
</script>
<style scoped>
.main{
    height: 100%;
    background: #4C62E2;
}
.topImg{
    position: relative;
    width: 100%;
    height: 11.04rem;
}
.topImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inviteTxt{
    position: absolute;
    bottom: 1.5rem;
    width: 100%;
    text-align: center;
}
.inviteTxt>p:first-child{
    color: #fff;
    font-size: 0.42rem;
}
.inviteTxt>p:last-child{
    color: #fff;
    font-size: 0.32rem;
    font-family: PingFang SC;
    font-style: italic;
    color: #FFFFFF;
    margin-top: 0.1rem;
}
.inviteTxt>p:last-child>span{
    color: #fff;
    font-size: 0.46rem;
    font-weight: bold;
    font-style: normal;
}
.container{
    padding: 0 0.26rem .46rem 0.26rem;
    background: #4C62E2;
    margin-top: -1.2rem;
}
.form{
    background: #5F77F7;
    box-shadow: 0px 0.06rem 0.21rem 0px #384FD3;
    border-radius: 0.2rem;
    padding: 0.16rem 0.52rem 0.56rem 0.52rem;
    overflow: hidden;
}
.form-item{
    width: 5.64rem;
}
.label{
    font-size: 0.32rem;
    color: #fff;
    padding: 0.2rem 0;
}
.form-item-con{
    height: 0.68rem;
}
.inputs{
    background: #4C62E2;
    border: 0.02rem solid #DCE2FF;
    border-radius: 0.05rem;
    width: 92%;
    height: 100%;
    color: #fff;
    font-size: 0.28rem;
    padding: 0 0.16rem;
}
.pay-type{
    line-height: 0.68rem;
}
textarea{
    background: #4C62E2;
    border: 0.02rem solid #DCE2FF;
    border-radius: 0.05rem;
    width: 92%;
    color: #fff;
    font-size: 0.28rem;
    padding: 0.16rem;
}
.area{
    height: 2rem;
}
.sendBtn{
    color: #A4DEFF;
    font-size: 0.26rem;
    position: absolute;
    right: 0.42rem;
    top: 0.2rem;
    border-left: 0.01rem solid #7486EF;
    padding-left: 0.2rem;
}
.footer{
    display: flex;
    justify-content: space-between;
    margin-top: 0.46rem;
}
.footer span:first-child{
    font-size: 0.3rem;
    color: #fff;
    width: 2.62rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    background: #FF9C00;
    border-radius: 0.1rem;
    display: inline-block;
}
.footer span:last-child{
    font-size: 0.3rem;
    color: #FFC05E;
    width: 2.6rem;
    height: 0.78rem;
    line-height: 0.78rem;
    text-align: center;
    border-radius: 0.1rem;
    border: 0.02rem solid #FFC05E;
    display: inline-block;
}
</style>